<template>
	<view>
		<view class="contain">
			<checkbox-group @change="selectChange">
				<view class="good_item" v-for="(item, index) in goodList" :key="item.id">
					<view class="info_c">
						<checkbox :value="item.id" :checked="item.checked"></checkbox>
						<view class="image_c">
							<image :src="item.productPic" mode="aspectFill"></image>
						</view>
						<view class="detail_info">
							<text>{{item.productName}}</text>
							<text>编号：{{item.memberId}}</text>
							<text>￥{{item.price}}</text>
							<text>数量{{item.quantity}}</text>
						</view>
					</view>
					<view class="btn_bar">
						<view class="btn_c">
							<view class="cal" @tap="cal(-1,item.id)">
								-
							</view>
							<input type="number" v-model="item.quantity" />
							<view class="cal" @tap="cal(1,item.id)">
								+
							</view>

						</view>
					</view>
				</view>
			</checkbox-group>
		</view>

		<view class="footer">
			<view class="checkAll">
				<checkbox-group name="checkAll" @change="changCheckAll">
					<label>
						<text>全选</text>
						<checkbox value="checkAll" :checked="isCheckAll" />
					</label>
				</checkbox-group>
			</view>
			<view class="total_sub">
				<view class="total">
					合计：￥
					<text class="total_price">{{totalPrice}}</text>
				</view>
				<view class="sub" @tap="sub">
					结算
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../../api/request.js';
	import checkUserLogin from '../../../mixin/check_user_login.js';
	export default {
		data() {
			return {
				goodList: [],
				isCheckAll: false,
				selectList: [],
				totalPrice: 0
			};
		},
		methods: {
			// 获取购物车信息
			async initInfo() {
				let res = await request({
					url: '/cart/findAllCartItem'
				})
				if (res.data.success == true) {
					res.data.data.items.forEach(item => item.checked = false)
					this.goodList = [...res.data.data.items];
				} else {
					uni.showToast({
						title: res.data.message,
						icon: "none"
					})
				}
			},
			cal(i, id) {
				let _this = this;
				this.goodList.forEach(async item => {
					// 判断id值
					if (item.id == id) {
						// 当其小于2时处理
						if (i == -1 && item.quantity < 2) {
							uni.showModal({
								title: '你要删除改商品么？',
								async success(clickRes) {
									// 取消
									if (clickRes.cancel) {
										uni.showToast({
											title: "你取消了"
										})
									} else {
										const res = await request({
											url: '/cart/delCartItems',
											method: 'POST',
											data: [id]
										})
										if (res.data.success == true) {
											uni.showToast({
												title: "删除成功"
											})
											_this.initInfo()
										}

									}
								}
							})
						} else {
							item.quantity = +item.quantity + i;
							// 执行加减请求
							const res = await request({
								url: '/cart/addCart',
								method: "POST",
								data: {
									cartId: "",
									productId: item.productId,
									productSkuId: item.productSkuId,
									quantity: i
								}
							})
						}
					}
				})
			},
			selectChange(e) {
				this.selectList = e.detail.value;
				this.goodList.forEach(item => {
					if (this.selectList.findIndex(item1 => item.id == item1) !== -1) {
						item.checked = true
					} else {
						item.checked = false
					}
				})
				this.isCheckAll = this.selectList.length == this.goodList.length;
			},
			// 全选按钮
			changCheckAll() {
				this.isCheckAll = !this.isCheckAll;
				// 点击全选按钮时,使所有商品的选定属性和全选框一至
				this.goodList.forEach(item => {
					item.checked = this.isCheckAll;
				})
			},
			// 结算
			async sub() {
				let params = [];
				this.goodList.forEach(item => {
					let obj = {};
					if (item.checked) {
						obj.cartId = item.id;
						obj.productId = item.productId;
						obj.productQuantity = item.quantity;
						obj.productSkuId = item.productSkuId;
						params.push(obj)
					}
				})
				// 判断是否选中商品
				if (params.length > 0) {
					const res = await request({
						url: '/order/addPreOrder',
						method: 'POST',
						data: {
							orderItemList: params
						}
					})
					if (res.data.success == true) {
						// 提交
						const subParams = [];
						this.goodList.forEach(item => {
							const obj = {};
							if (item.checked == true) {
								obj.cartId = item.id;
								obj.productId = item.productId;
								obj.productQuantity = item.quantity;
								obj.productSkuId = item.productSkuId;
								subParams.push(obj)
							}
						})
						// 提交商品状态
						const subRes = await request({
							url: '/order/addPreOrder',
							method: 'POST',
							data: {
								orderItemList: subParams
							}
						})
		
						if(subRes.data.success == true) {
							uni.showToast({
								title: '提交成功，即将跳转至付款页面',
								icon: 'none'
							});
							setTimeout(()=>{
								console.log(subRes);
								uni.navigateTo({
									url: `../../pay/pay?id=${subRes.data.data.orderId}`
								})
							},1500)
						} else {
							uni.showToast({
								title: subRes.data.message,
								icon: 'none'
							});
						}

					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: '未选取商品，请选取需要结算的商品',
						icon: 'none'
					})
				}
			}
		},
		async onShow() {
			const res = await checkUserLogin.checkUserLogin();
			console.log(res);
			if(res) {
				this.initInfo()
			}
		},
		watch: {
			goodList: {
				handler: function() {
					const totalPrice = this.goodList.reduce((t, n) => {
						if (n.checked) {
							return t + n.price * n.quantity
						} else {
							return t
						}
					}, 0)
					this.totalPrice = totalPrice;
				},
				deep: true
			}
		},
		mixins:['checkUserLogin']
	}
</script>

<style lang="scss" scoped>
	@import './cart.scss';
</style>
